<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search" placeholder="请输入工单编号" class="handle-input mr10" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="pagedData" border style="width: 100%">
        <el-table-column fixed prop="sheetNum" label="工单编号" width="120px" align="center"></el-table-column>
        <el-table-column fixed prop="sheetType" label="工单类型" align="center" width="120px"></el-table-column>
        <el-table-column fixed prop="acceptName" label="接单人员" align="center"></el-table-column>
        <el-table-column prop="acceptDepart" label="接单部门" align="center" width="100px"></el-table-column>
        <el-table-column prop="processContent" label="受理内容" align="center" width="280px"></el-table-column>
        <el-table-column prop="processTime" label="受理时间" width="150px" align="center"></el-table-column>
        <el-table-column prop="processName" label="受理人员姓名" align="center" width="150px"></el-table-column>
        <el-table-column prop="processNum" label="受理人员工号" align="center" width="150x"></el-table-column>
        <el-table-column prop="processType" label="受理方式" align="center"></el-table-column>
        <el-table-column prop="handle" label="处理情况" align="center"></el-table-column>
        <el-table-column prop="issueTime" label="工单下发时间" align="center" width="150px"></el-table-column>
        <el-table-column prop="acceptTime" label="接单时间" width="150px" align="center"></el-table-column>
        <el-table-column prop="clientFeedback" label="客户意见" align="center"></el-table-column>
        <el-table-column prop="handleDepart" label="处理部门" align="center"></el-table-column>
        <el-table-column prop="handleName" label="处理人员" align="center"></el-table-column>
        <el-table-column prop="country" label="所属县区" align="center"></el-table-column>
        <el-table-column prop="note" label="备注" align="center"></el-table-column>
        <el-table-column prop="insertTime" label="插入时间" align="center" width="150px"></el-table-column>
        <el-table-column prop="type" label="服务/意见申请类型" width="200px" align="center"></el-table-column>
        <el-table-column prop="clientName" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="clientNum" label="客户编号" align="center" width="150px"></el-table-column>
        <el-table-column prop="loc" label="地址" align="center" width="200px"></el-table-column>
        <el-table-column prop="tel" label="联系电话" width="150px" align="center"></el-table-column>

        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
            <!--          <el-button type="text" size="small">编辑</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination :total="total" :current-page="currentPage" :page-size="currentPageSize" :page-sizes="[3,6,10]"
                       layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="表单详情" v-model="sheetVisible" width="50%">

    </el-dialog>
  </div>
</template>

<script>
import {adminMessage} from "../../api/api";
import {getDateForm} from "../../utils/validate";
export default {
  data() {
    return {
      search: "",
      currentPage: 1,
      currentPageSize: 3,
      total: null,
      tableData: [],
      pagedData: [],
      sheetVisible: false,
      form: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handleClick(row) {
      this.sheetVisible = true
      console.log(row);
    },
    // 模糊搜索
    searchList() {
        if (this.tableData.length > 0){
          let pageData = this.tableData.filter((item) =>
              (item.sheetNum !==null && item.sheetNum.includes(this.search))||
              (item.sheetType !==null && item.sheetType.includes(this.search))||
              (item.acceptName !==null && item.acceptName.includes(this.search))||
              (item.acceptDepart !==null && item.acceptDepart.includes(this.search))||
              (item.processContent !== null && item.processContent.includes(this.search))||
              // (item.processTime !==null && item.processTime.includes(this.search))||
              (item.processName !==null && item.processName.includes(this.search))||
              (item.processNum !==null && item.processNum.includes(this.search))||
              // (item.processType !==null && item.processType.includes(this.search))||
              // (item.handle !==null && item.handle.includes(this.search))||
              // (item.issueTime !==null && item.issueTime.includes(this.search))||
              // (item.clientFeedback !==null && item.clientFeedback.includes(this.search))||
              // (item.handleDepart !==null && item.handleDepart.includes(this.search))||
              // (item.handleName !== null && item.handleName.includes(this.search))||
              (item.country !==null && item.country.includes(this.search))||
              (item.note !==null && item.note.includes(this.search))||
              // (item.insertTime !==null && item.insertTime.includes(this.search))||
              (item.type !==null && item.type.includes(this.search))||
              (item.clientName !==null && item.clientName.includes(this.search))||
              (item.clientNum !==null && item.clientNum.includes(this.search))||
              (item.loc !== null && item.loc.includes(this.search))||
              (item.tel !== null && item.tel.includes(this.search))
          )
          this.pagedData = pageData.filter((item, index) =>
              index < this.currentPage * this.currentPageSize && index >= this.currentPageSize * (this.currentPage - 1)
          )
          this.total = pageData.length
        }
    },
    // 获取所有模板数据库数据
    getData() {
      adminMessage().then((res) =>{
        this.tableData = []
        res.data.data.forEach((item) => {
          let add = {
            sheetNum: item.sdDggdNumber,
            sheetType: item.sdDggdGdlb ==1 ? '意见工单' : '服务申请工单',
            acceptName: item.sdDggdJdry,
            acceptDepart: item.sdDggdJdbm,
            processContent: item.sdDggdSlnr,
            processTime: getDateForm(item.sdDggdSlsj),
            processName: item.sdDggdSlryxm,
            processNum: item.sdDggdSlryid,
            processType: item.sdDggdSlfs,
            handle: item.sdDggdClqk,
            issueTime: getDateForm(item.sdDggdDgxfsj),
            acceptTime: getDateForm(item.sdDggdJdsj),
            clientFeedback: item.sdDggdKhyj,
            handleDepart: item.sdDggdClbm,
            handleName: item.sdDggdClry,
            country: item.sdDggdSsqx,
            note: item.sdDggdBz,
            insertTime: getDateForm(item.sdDggdCrsj),
            type: item.sdDggdFwsqyjlx,
            clientName: item.sdDggdKhmc,
            clientNum: item.sdDggdKhbh,
            loc: item.sdDggdKhdz,
            tel: item.sdDggdKhlxdh
          }
          this.tableData.push(add)
        })
        this.searchList()
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.currentPage = 1
      this.searchList();
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;//0,1,2...
      this.form = row;
      console.log('idx:', index +"," +row)
      this.sheetVisible = true;
    },
    //当每页数量改变
    pageSizeChange(size) {
      this.currentPageSize = size
      this.searchList()
    },
    // 当当前页改变
    pageChange(page) {
      this.currentPage = page
      this.searchList()
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
